<template>
    <div class="flexbox flexcolumn height_100" v-loading="loading" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0)">
        <AddProUser :editForm="editForm" @setSessionStorage="setSessionStorage" ref="add_user" />
        <AddGoods :editForm="editForm" @setSessionStorage="setSessionStorage" ref="add_goods" />
        <div class="flex over_box">
            <el-form label-position='left' label-width="100px" size="small" :model="editForm" :hide-required-asterisk='true' ref="editForm" :rules="addRules" class="add_form">
                <RevenueModel ref="rev_ref" :editForm="editForm" :xingtuList="xingtuList" :userList="userList" @addGoods="addGoods" @addProUser="addProUser" @setSessionStorage="setSessionStorage" :addRules="addRules"/>
            </el-form>
        </div>
        <div class="project_footer com_box flexbox flexcenter">
            <el-button type="primary" class="el-button-width" size="small" @click="submitForm('editForm')" :loading="disabled" :disabled='disabled'>保存</el-button>
            <el-button class="el-button-width" size="small" plain @click="$router.go(-1)">返回</el-button>
        </div>
    </div>
</template>

<script>
import AddGoods from "./AddGoods";
import AddProUser from "./AddProUser";
import RevenueModel from './RevenueModel'
export default {
    components: {
        AddGoods,
        AddProUser,
        RevenueModel
    },
    name: "",
    data() {
        return {
            loading: false,
            disabled: false,
            userList: [],
            xingtuList:[],
            editForm: {
                id:null,
                project_name: "",
                brand_name:"",
                product_name:"",
                member: [
                    {
                        user_id:null,
                        priority:1,
                    },
                    {
                        user_id:null,
                        priority:2,
                    },
                    {
                        user_id:null,
                        priority:3,
                    },
                ],
                media_worker_ratio: "",
                content_worker_ratio: "",
                project_manager_ratio: "",
                xingtu_cost: "",
                xingtu_ratio: "",
                qc_radio: "",
                dou_cost: "",
                dou_ratio: "",
                // content_cost: "",
                // content_ratio: "",
                advertiser: [],
                product: [],
                xingtu:[],
            },
            addRules: {
                checkFloat: [
                    {
                        pattern:
                            /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/,
                        required: true,
                        message: "请输入正确数值",
                        trigger: ["blur", "change"],
                    },
                ],
            },
        };
    },
    created() {
        this.editForm.id = this.$route.query.id
        this.getUserList();
        this.getDetails()
        this.getXingtu()
    },
    methods: {
        //获取详情
        async getDetails() {
            this.loading = true
            const { data: res } = await this.$http.post(
                "fxdata/revenue/projectFind",
                {
                    id:this.$route.query.id
                }
            );
            if (res.code !== 200) {
                this.loading = false
                this.$message.error(res.msg);
                return;
            } else {
                this.loading = false
                res.data.xingtu = res.data.xingtu.map(item=>{return item.star_id})
                this.editForm = res.data
            }
        },

        //获取星图
        async getXingtu() {
            const { data: res } = await this.$http.post(
                "fxdata/revenue/starList"
            );
            let result = res
            // let result = JSON.parse(res);
            if (result.code !== 200) {
                this.$message.error(result.msg);
                return;
            } else {
                this.xingtuList = result.data.list;
            }
        },

        //获取人员
        async getUserList() {
            const { data: res } = await this.$http.post(
                "adminapi/company/szMediaList"
            );
            if (res.code !== 200) {
                this.$message.error(res.msg);
                return;
            } else {
                this.userList = res.data;
            }
        },

        addProUser() {
            this.$refs.add_user.dialogVisible = true;
            this.$refs.add_user.getDataList();
        },

        addGoods(){
            if (this.editForm.advertiser.length <= 0) {
                this.$message.error("请先选择账户");
                return;
            }
            this.$refs.add_goods.dialogVisible = true;
            this.$refs.add_goods.getHasSelect();
        },

        // 提交添加
        submitForm(formName) {
            this.$refs[formName].validate(async (valid) => {
                if (valid) {
                    let subForm = JSON.parse(JSON.stringify(this.editForm));
                    subForm.advertiser = subForm.advertiser.map(item=>{return item.advertiser_id})
                    subForm.product = subForm.product.map(item=>{return item.product_id})
                    subForm.xingtu = this.$refs.rev_ref.selectBrand.map(item=>{
                        return {
                            star_id:item.starId,
                            star_name:item.starName
                        }
                    })
                    this.disabled = true;
                    const { data: res } = await this.$http.post(
                        "fxdata/revenue/projectEdit",
                        subForm
                    );
                    if (res.code !== 200) {
                        this.$message.error(res.msg);
                        this.disabled = false;
                        return;
                    } else {
                        this.$message({
                            message: "保存成功！",
                            type: "success",
                        });
                        this.disabled = false;
                        this.$router.go(-1);
                    }
                } else {
                    this.disabled = false;
                    return false;
                }
            });
        },

        // 缓存
        setSessionStorage() {
            
        },
    },
    
};
</script>


<style scoped>
.project_footer {
    padding: 0 20px;
    height: 72px;
}
</style>

